有以下四種方式可以在HTML中引入 CSS。
內聯方式指的是直接在HTML標籤中的style屬性中添加CSS。
<div style="background: red"></div>
通常不建議使用此方式，因為它只能改變當前標籤的樣式，如果想要多個<div>擁有相同的樣式，就必須要重複替每一個<div>添加相同的樣式，如果想要統一編輯成一種樣式(例如將原本的背景顏色從藍色改成紅色)，這樣你就必須逐一修改style中的代碼。此外，內聯方式引入CSS代碼會使HTML代碼變得冗長，使得網頁難以維護。
嵌入方式指的是在HTML頭部<head>中的<style>標籤下書寫CSS代碼。
<head>
<style>
.content { background: red; }
</style>
</head>
通常我只有在練習小組件的時候會使用此方式，目的是可以快速查看自己寫的結構，因為嵌入方式的CSS只對當前的網頁有效。而且CSS代碼是直接寫在HTML文件中，使種方式使得代碼比較集中，若網頁過於複雜，HTML也面就會變得很冗長，如果當多個頁面需要引入相同的CSS代碼時，因為嵌入的CSS只對當前頁面有效，也是必須在每個HTML中重複撰寫，也不利於維護。
連結方式指的是使用HTML頭部的<head>標籤引入外部的CSS文件。
<head>
<link rel="stylesheet" href="css/style.css">
</head>
比較彈性，一般較常使用此種方式引入CSS。使用此方式所有的CSS代碼只存在於單獨的CSS文件中，可以有效率的使所有頁面都使用同一個樣式規則，將語意內容和外觀樣式分開，所以具有良好的可維護性。並且所有的CSS代碼只存在於CSS文件中，切換頁面時只需加載HTML文件即可。
此外最後載入的樣式會蓋過先前載入的樣式，這個觀念主要跟優先權有關係，外部載入的樣式會放在<head>中，所以載入頁面時會最先被讀取，然後才開始讀取到頁面中的樣式，因此大多數情況下CSS優先順序可以簡化成最後設定的樣式將蓋過之前設定的樣式。
匯入方式指的是使用CSS規則引入外部CSS文件。
<style>
@import url(style.css);
</style>
目前沒用過此種方式，主要是因為先讀取網頁才會再讀取CSS，當使用者瀏覽網站若是使用匯入方式，使用者第一眼會先看到的是沒有排版及調整樣式前的網頁，再看到調整後的畫面，這樣的方式較不推薦。
各樣式表權重
近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<span style=”color:red”>span</span>
內部樣式表：在頁面中的樣式，寫在<style>中的樣式
外聯樣式表：單獨存在一個css文檔中，通過link引入或import匯入的樣式link方式的樣式的權重 高於@import的權重.
CSS 說明&標籤參考
https://tinyl.io/4KWZ
http://www.w3big.com/zh-TW/css/default.html
iThome鐵人賽
看影片追技術